<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta
  name="viewport"
  content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3"
/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>音乐播放器</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
 <div id="app">
    <div class="wrap">
        <!-- 播放器主体区域 -->
        <div class="play_wrap" id="player">
          <div class="search_bar">
            <img src="images/player_title.png" alt="" />
            <!-- 搜索歌曲 -->
            <input type="text" autocomplete="off" v-model="qurey" placeholder="请输入歌手/歌曲" @keyup.enter="searchMusic" />
            <a href="#" class="search" @click="seachMusicLis">搜索</a>
          </div>
          <div class="center_con">
            <!-- 搜索歌曲列表 -->
            <div class='song_wrapper'>
              <ul class="song_list">
               <li v-for="item in musicList" :key="item.id">
                 <a href="javascript:;" @click="playMusic(item.id)"></a> 
                 <b>{{item.name}}</b> 
                 <span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span></li><!---->
              </li>
               <!-- <li @click="musicPlayer"><a href="javascript:;" ></a> <b >你好</b> <span><i></i></span></li> -->
              </ul>
              <img src="images/line.png" class="switch_btn" alt="">
            </div>
            <!-- 歌曲信息容器 -->
            <div class="player_con" :class="{playing:isplaying}">
              <img src="images/player_bar.png" class="play_bar" />
              <!-- 黑胶碟片 -->
              <img src="images/disc.png" class="disc autoRotate" />
              <img :src="musicPicUrl"  class="cover autoRotate" />
            </div>
            <!-- 评论容器 -->
            <div class="comment_wrapper">
              <h5 class='title'>热门留言</h5>
              <div class='comment_list'>
                <dl v-for="item in hotCommentsLis">
                  <dt><img :src="item.user.avatarUrl"></dt>
                  <dd class="name">{{item.user.nickname}}</dd>
                  <dd class="detail">
                    {{item.content}}
                  </dd>
                </dl>
              </div>
              <img src="images/line.png" class="right_line">
            </div>
          </div>
          <div class="audio_con">
            <audio ref='audio' @play="play" @pause="pause" :src="musicPlayUrl"   controls autoplay loop class="myaudio"></audio>
          </div>
          <div class="video_con" v-show="isShow" style="display: none;">
            <video controls="controls" :src="mvUrl" autoplay='autoplay'></video>
            <div class="mask" @click="hide"></div>
          </div>
        </div>
      </div>
 </div>
   <script src="js/vue.js"></script>
   <script src="js/axios.js"></script>
   <script src="js/index.js"></script>
</body>

</html>
